<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <!--固定引用结束,自定义引用添加在下面-->
    <title>业务介绍</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>
        .calculator-search-wrap {
            padding: 0 .32rem;
            background: rgba(255, 255, 255, 1);
            border: solid 1px rgba(234, 234, 234, 1);
            border-width: 0 0 1px 0;
        }

        .calculator-search-box {
            margin-bottom: .12rem;
            margin-top: .12rem;
        }

        .calculator-search-img {
            width: 7.5rem;
            height: 3rem;
        }

        .calculator-search-img img {
            width: 100%;
            height: 100%;
        }

        .calculator-search-search {
            height: .64rem;
            width: 6.08rem;
            border-radius: .08rem;
            background: rgba(245, 245, 245, 1);
            padding-right: .22rem;
        }

        .calculator-search-icon {
            margin-left: .24rem;
            color: rgba(159, 159, 159, 1);
        }

        .calculator-search-sc {
            color: rgba(159, 159, 159, 1);
        }


        .calculator-search-search i {
            margin-right: .26rem;
        }

        .calculator-search-search input {
            margin-left: .14rem;
        }

        .calculator-search-cancle {
            color: rgba(44, 104, 255, 1);
        }

        .search-history-wrap {
            background: rgba(255, 255, 255, 1);
            /*padding: 0 .32rem;*/
            margin-top: .82rem;
        }

        .search-history-head {
            margin-bottom: .14rem;
            padding: 0 .32rem;
        }

        .search-history-head div {
            height: .4rem;
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
        }

        .search-history-head span {

        }

        .search-data-wrap {
            padding: 0 .32rem;
        }

        .search-data-wrap div:last-child {
            border: none;
        }

        .search-data-item {
            border-bottom: solid 1px #f6f6f6;
            height: .96rem;
            line-height: .96rem;
            color: rgba(34, 34, 34, 1);
        }

        .abs-nodata-box {
            margin-top: 180px;
            margin-bottom: 137px;
        }

        .abs-nodata-box img {
            width: 260px;
            height: 106px;
        }

        .abs-nodata-box div {
            color: rgba(34, 34, 34, 0.7);
        }

        input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }


    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div class="flex-column h-100-p">

    <!--状态栏-->
    <div class="bg-main status-bar"></div>

    <div class="calculator-search-wrap">
        <div class="flex-row justify-content-between align-items-center calculator-search-box">
            <div class="flex-row justify-content-between align-items-center calculator-search-search" onclick="goSearch()">
                <div class="flex-row align-items-center w-100-p">
                    <span class="iconfont iconsousuo-01 fs16 calculator-search-icon"></span>
                    <form action="" onsubmit="return false;" class="w-100-p">
                        <input class="w-100-p ml10 fs14" type="search" id="keyWord" placeholder="搜索债券代码/简称">
                    </form>
                </div>
                <span class="iconfont iconshanchu fs16 calculator-search-sc dis-n" onclick="cancleDel()"></span>
            </div>
            <div class="calculator-search-cancle fs14 ff400" onclick="clickBack()">取消</div>
        </div>
    </div>

    <div class="flex-1 scoll-y bg-white">
        <div class="search-data-wrap flex-column"></div>
    </div>

</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>

  let pm = {
    key: '',
    isClick: false,
    flag:''
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    pm.key = $('#keyWord').val()
    pm.flag = params.flag
    if (pm.flag) {//不能计算
      noData('暂不支持该类型的ABS计算！')
    } else {
      noData('请输入您的搜索条件！')
    }

    document.getElementById('keyWord').focus()

    $('.calculator-search-sc').click(function () {
      pm.keyWord = ''
      $('#keyWord').val(pm.keyWord)
      $('.calculator-search-sc').hide()
    })

    document.oninput = function (event) {
      if ($('#keyWord').val()) {
        $('.calculator-search-sc').show()
      } else {
        $('.calculator-search-sc-sc').hide()
      }
    }

    document.onkeydown = function (event) {
      if (event.keyCode === 13) {//回车键的键值为13
        let key = $('#keyWord').val()
        if (key && Utils.replaceAll(key, ' ', '')) {
          goSearch()//回车需执行的方法
        } else if (key) {
          $('#keyWord').val('')
        }
      }
    }
  }

  function reLoadPage(){

    document.getElementById('keyWord').focus()

    if (pm.flag) {//不能计算
      noData('暂不支持该类型的ABS计算！')
    } else {
      noData('请输入您的搜索条件！')
    }
  }

  function noData(msg) {
    $('.search-data-wrap').html(
      '            <div class="flex-column align-items-center abs-nodata-box">\n' +
          '                <img src="../../images/data/abs-no-data.png">\n' +
          '                <div class="fs12">' + msg + '</div>\n' +
          '            </div>\n')
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {
    document.getElementById('keyWord').focus()
  }

  //ABS数据查询
  function goSearch() {
    pm.key = $('#keyWord').val()
    if (!pm.key) {
      noData('请输入您的搜索条件！')
      $('.calculator-search-sc').hide()
      return
    }

    $('.calculator-search-sc').show()

    let data = {
      'commons': {},
      'datas': {
        'keyWord': pm.key,
        'securityType': 'ABS',
        'filterExpired': true
      }
    }
    Server.calculatorSearch.searchByKey(data).then(function (res) {

      if (res.data && res.data.length > 0) {
        let htmlStr = ''
        $.each(res.data, function (i, item) {
          htmlStr += '<div class="search-data-item fs15 ff400 line1" onclick="goCalculator(\'' + item.id + '\', \'' + item.securityCode + '\', \'' + item.securityName + '\')">' + item.securityCode + '    ' + item.securityName + '</div>'
        })
        $('.search-data-wrap').html(htmlStr)
      } else {
        noData('暂不支持该类型的ABS计算！')
      }
    })
  }

  function cancleDel() {
    $('#keyWord').val('')
    $('.search-data-wrap').html('')
    $('.calculator-search-sc').hide()
  }

  function goCalculator(id, code, name) {
    let data = {
      'commons': {},
      'datas': {
        'securityId': id,
        'securityCode': code
      }
    }
    let obj = {name: name, code: code, id: id}

    if (!pm.isClick) {
      pm.isClick = true
      //校验是否可以计算
      Server.calculatorSearch.checkAbsCalc(data).then(function (res) {

        //关注数据缓存
        dataCache(obj)

        pm.isClick = false
        if (res.data) {
          jsBridge.openWindow('html/data/abs-calculator.html?id=' + id, {},{noBar: false})
        } else {
          //跳转到无数据页面
          jsBridge.openWindow('html/data/calculator-search.html?flag=true',{},{noBar: false})
        }
      })
    }
  }

  //关注数据缓存
  function dataCache(obj) {

    //当前点击债券缓存
    jsBridge.getData('absSearchData').then(list => {
      let data = Utils.notEmpty(list) && Utils.notEmpty(list) ? list : []

      //最新的搜索放在第一个
      let currList = [], k = 0
      currList.push(obj)

      //最多放置9个历史数据
      $.each(data, function (i, item) {
        if (k < 9 && obj.id !== item.id) {
          currList.push(item)
          k++
        }
      })

      jsBridge.setData('absSearchData', currList)
    })
  }


</script>
</html>
